<template>
    <div class="subject">
        <div v-for="(item) in arr" :key="item.id">
            <span>{{ item.left }}</span>&nbsp;
            <span> + </span>&nbsp;
            <span>{{ item.right }}</span>&nbsp;
            <span> = </span>&nbsp;
            <input v-model.number="item.result" type="number" />&nbsp;
            <button @click="getResult(item.id)">提交</button>
        </div>
    </div>

</template>

<script>
export default {
    name: 'SubjectItem',
    data() {
        return {
            result: 0
        }
    },
    props: ['arr'],
    methods: {
        getResult(id) {
            this.$emit('getResult', id)
        }
    }
};
</script>

<style scoped>
.subject {
    margin: 5px;
    padding: 5px;
    font-size: 20px;
}

.subject span {
    display: inline-block;
    text-align: center;
    width: 20px;
}

.subject input {
    width: 50px;
    height: 20px;
}
</style>